7.6 Timers

Motivations
Timers
- The window object supports many useful features. One of them is timer.
- There are two types of timer - one time timer and repeating timer.
- One time timer - Read all in Window setTimeout() Method.
  - How to clear the timer? clearTimeout(timerid)
- Repeating timer - Read all in Window setInterval() Method.
  - How to clear the timer? clearInterval(timerid)
- Can you display a timer on the n-puzzle game, that displays the elapsed time? Let's try now.
```
<script>
    ??? count;
    function start() {
        document.???('start_button').??? (???, function() {
            count = ???;
            window.setInterval(function() {
                count???;
                ???.getElementById('seconds').??? = count;
            },???);  // Every 1 second
        };
    }
    ???.???(???, start);  // When the body is completely loaded.
</script>

<body>
    <button id='start_button'>Start the game</button><br>
    <p>Elapsed time: <span id='seconds></span></p>
</body>
```
- Trial 1: Let's try to make timer. The timer is invoked every second.
  <div>Elapsed time: <span id='tr1-seconds'></span></div> <button id='tr1-start'>Start the game</button><br> <button id='tr1-stop'>Stop the game</button><br> <script> ??? count; var timer; document.???(???).???(???, ???() { // event handler for click on the start button count = ???; // reset the count if (timer != ???) // if timer is not undefined ???(timer); // clear the timer // set the interval timer timer = window.???(function() { count???; ???.getElementById('tr9-seconds').??? = count; },???); // Every 1 second }); </script>
- Trial 2: Let's try to make a wakeup call. You will be called after 10 seconds. Which type timer do you need to use?
  Let's use .setTimeout().
  <button id='tr2-start'>Start the wakeup call</button><br> <button id='tr2-stop'>Stop</button><br> <script> var timer; document.???(???).???(???, ???() { // event handler for click on the start button if (timer != ???) // if timer is not undefined ???(timer); // clear the timer // set the timeout timer timer = window.???(function() { ???('Waaaaaaaaaaaake Uuuuuuuuuuuuuuuup!'); },???); // after 10 seconds }); document.???(???).???(???, ???() { // event handler for click on the stop button ???(timer); // clear the timer }); </script>
- Trial 3: Let's try to make a wakeup call. You will be called if there is no activity for 10 seconds. What activity?
  Let's use .setTimeout() and two events - mousemove and keydown. <button id='tr3-start'>Start the wakeup call</button><br> <button id='tr3-stop'>Stop</button><br> <script> var timer; // timer id var activated = false; // indicator to tell whether the wake up call is activated. document.getElementById('tr3-start').addEventListener('click', function() { ???; // invoke the below function to register the timeout timer. activated = ???; // activated }); document.getElementById('tr3-stop').addEventListener('click', function() { ???(timer); // clear the timer activated = ???; // not activated }); function wakeUpCall() { if (timer != undefined) // if timer is not undefined ???(???); // clear the timer timer = window.???(???() { alert('Waaaaaaaaaaaake Uuuuuuuuuuuuuuuup!'); }, ???); // after 10 seconds } // event handler for mouse movement document.addEventListener('mousemove', function() { if (activated) ???; // reregister the wake up timer }); // event handler for keying document.addEventListener('keydown', function() { if (activated) ???; }); </script>

Learning outcomes